<template>
  <Teleport to="body">
    <div class="edit">
      <xy-editor
        v-model="content"
        :theme="$store.state.theme"
        :border-radius="setting.borderRadius"
        :font-family="setting.fontFamily"
        :transitionMode="setting.transitionMode"
        :styles="setting.styles"
        :custom-parser="customParser"
        :templates="setting.templates"
      />
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { content } from "./editorConfig/defaultContent"
import { setting } from "./editorConfig/setting"
import { customParser } from "./editorConfig/customParser"
</script>

<style scoped>
.edit {
  width: 100%;
  height: 100vh;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
